<template>
  <div class="app-iframe-container" style="min-height: 600px; height: max-content;width: 97%"
       element-loading-background="rgba(255, 255, 255, 0.4)">
    <el-form :model="form" label-width="150px" size="small">
      <el-row style="min-width: 900px">
        <!-- 基本信息 -->
        <el-row class="row-title between">
          <h2>配置信息</h2>
          <el-row style="position:absolute; margin-left: calc(100% - 66px);;padding-bottom: 16px;">
            <el-button size="small" type="primary" @click="cancel">关闭</el-button>
          </el-row>
        </el-row>

        <el-row>

          <el-col :span="6">
            <el-form-item label="登录帐号：" prop="account">
              <el-input v-model="form.account"/>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="密码：" prop="password">
              <el-input v-model="form.password"/>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="状态,0:删除,1有效,2冻结：" prop="status">
              <el-input v-model="form.status"/>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="版本号：" prop="version">
              <el-input v-model="form.version"/>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="备注：" prop="remark">
              <el-input v-model="form.remark"/>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="创建人：" prop="createAccount">
              <el-input v-model="form.createAccount"/>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="创建时间：" prop="createTime">
              <el-input v-model="form.createTime"/>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="修改人：" prop="updateAccount">
              <el-input v-model="form.updateAccount"/>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="修改时间：" prop="updateTime">
              <el-input v-model="form.updateTime"/>
            </el-form-item>
          </el-col>

        </el-row>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {accountApi} from '@/service/account/account-api'

export default {
  data() {
    return {
      form: {},
      query: {},
    }
  },
  methods: {
    get() {
      const id = this.$route.params.id
      accountApi.getByid(id)
        .then(res => {
          if (res.data === null || res.data === '') {
            this.reset()
            return
          }
          this.form = res.data
        })
    },
    reset() {
      this.$refs['form'].resetFields()
    },
    cancel() {
      window.close()
    }
  },
  mounted() {
    this.setPageTitle('详情')
    this.get()
  }
}
</script>


<style scoped>
.app-container .row-title {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px
}

.app-container .row-title h2 {
  color: #409eff;
  font-size: 20px;
  line-height: 16px;
  font-weight: bolder;
  border-left: 2px solid #409eff;
  padding-left: 16px;
  margin: 0 0px 16px 0
}
</style>
<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.el-form-item .el-select.el-select--small {
  width: 100%;
}
</style>
